<!-- 成本收入-->
<template>
	<border cardTitle="血压统计">
		<div class=" count" style="height: 100%">
			<Chart :optionData="option_column" style="height: 100%"></Chart>
		</div>
	</border>
</template>
<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import {
		bigScreenApi
	} from '@/api/index';
	import {
		getRandom
	} from '@/utils/base.js'
	import * as echarts from 'echarts';
	export default {
		components: {
			border
		},
		name: 'CostIncome',
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					tooltip: {
						position: function(point, params, dom, rect, size) {
							return [point[1], 0];
						},
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(0, 255, 233,0)'
										},
										{
											offset: 0.5,
											color: 'rgba(255, 255, 255,1)'
										},
										{
											offset: 1,
											color: 'rgba(0, 255, 233,0)'
										}
									],
									global: false
								}
							}
						}
					},
					grid: {
						top: '20%',
						left: '12%',
						right: '10%',
						bottom: '15%'
						// containLabel: true
					},
					legend: {
						type: 'scroll',
						top: 'top',
						right: 20,
						icon: 'rect',
						itemGap: 20,
						padding: [20, 20],
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							fontSize: 10,
							color: '#fff'
						},
						itemStyle: {
							borderWidth: 0
						}
					},
					xAxis: [{
						type: 'category',
						axisLine: {
							show: true
						},
						splitArea: {
							// show: true,
							color: '#f00',
							lineStyle: {
								color: '#f00'
							}
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false
						},
						boundaryGap: false,
						data: []
					}],

					yAxis: [{
						type: 'value',
						min: 0,
						// max: 140,
						splitNumber: 4,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: 'rgba(255,255,255,0.2)'
							}
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: true,
							margin: 10,
							textStyle: {
								color: 'rgba(255,255,255,0.6)'
							}
						},
						axisTick: {
							show: false
						}
					}],
					series: [{
							name: '偏低',
							type: 'bar',
							stack: '总量',
							barMaxWidth: 12,
							barGap: '10%',
							itemStyle: {
								normal: {
									color: '#4BE9FF'
								}
							},
							data: []
						},

						{
							name: '正常',
							type: 'bar',
							stack: '总量',
							barMaxWidth: 12,
							itemStyle: {
								normal: {
									color: '#5081FE'
								}
							},
							data: []
						},
						{
							name: '轻度',
							type: 'bar',
							stack: '总量',
							barMaxWidth: 12,
							itemStyle: {
								normal: {
									color: '#FFD748'
								}
							},
							data: []
						},
						{
							name: '中度',
							type: 'bar',
							stack: '总量',
							barMaxWidth: 12,
							itemStyle: {
								normal: {
									color: '#FC7B03'
								}
							},
							data: []
						}, {
							name: '重度',
							type: 'bar',
							stack: '总量',
							barMaxWidth: 12,
							itemStyle: {
								normal: {
									color: '#e93c42'
								}
							},
							data: []
						}
					]
				},
				farmData: {
					totalOutCost: 0,
					totalIncome: 0
				}
			};
		},
		computed: {},
		props: {
			deptId: {
				type: [String, Number],
				default: '',
				option_column: {}
			}
		},
		watch: {
			deptId: {
				handler(newV, oldV) {
					this.$nextTick(() => {
						this.getInfo();
					});
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				// this.$postAction(bigScreenApi.ioCostByMonth + '?deptId=' + this.deptId).then(res => {
				// 	if (res && res.code == 1) {
				// 		}
				// });
				let cowData = [];
				for (var i = 0; i < 6; i++) {
					cowData.push({
						month: ((i + 11) % 12 == 0 ? 12 : (i + 11) % 12) + '月',
						level1: getRandom(1, 20),
						level2: getRandom(30, 100),
						level3: getRandom(1, 20),
						level4: getRandom(1, 20),
						level5: getRandom(1, 20),
						level6: getRandom(1, 20),
					})
				}
				let monthData = [],
					level1 = [],
					level2 = [],
					level3 = [],
					level4 = [],
					level5 = [],
					level6 = [];
				cowData.forEach(item => {
					monthData.push(item.month);
					level1.push(item.level1);
					level2.push(item.level2);
					level3.push(item.level3);
					level4.push(item.level4);
					level5.push(item.level5);
					level6.push(item.level6);
				});
				this.option_column.xAxis[0].data = monthData;
				this.option_column.series[0].data = level1;
				this.option_column.series[1].data = level2;
				this.option_column.series[2].data = level3;
				this.option_column.series[3].data = level4;
				this.option_column.series[4].data = level5;
				this.option_column.series[5].data = level6;
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				};
			}
		}
	};
</script>

<style scoped lang="less">
	.count {
		width: 100%;
		color: #fff;
		font-weight: 600;
		font-size: 12px;

		.count-item {
			.title {
				color: #1ed6ff;
			}

			.num {
				font-size: 0.26rem;
			}

			&+.count-item {
				margin-top: 0.26rem;
			}
		}
	}
</style>